<template>
  <div>
      <div style="display: flex;">
        <div style="width: 50%;">
            <el-divider content-position="left">保管服务费-优惠规则配置</el-divider>
              <el-table border :data="ruleList0" height="500" :span-method="objectSpanMethod">
                <el-table-column
                  label="寄存天数"
                  width="85">
                  <template scope="scope">
                    <el-input size="mini" v-model="scope.row.days" placeholder="请输入"  clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="最小金额"
                  width="100">
                  <template scope="scope">
                    <el-input v-model="scope.row.id" v-if="false"></el-input>
                    <el-input size="mini" v-model="scope.row.daysMin" placeholder="请输入"  clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="最大金额"
                  width="110">
                  <template scope="scope">
                    <el-input size="mini" v-model="scope.row.daysMax" placeholder="请输入"  clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="利率/%"
                  width="100">
                  <template scope="scope">
                    <el-input size="mini" v-model="scope.row.rateValue" placeholder="请输入"  clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="老折扣/%"
                  width="90">
                  <template scope="scope">
                    <el-input size="mini" v-model="scope.row.discount" placeholder="请输入"  clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="新用户折扣/%"
                  width="105">
                  <template scope="scope">
                    <el-input size="mini" v-model="scope.row.newDiscount" placeholder="请输入"  clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="handleEdit(scope.$index, scope.row)">提交</el-button>
                  </template>
                </el-table-column>
              </el-table>
        </div>
        <div style="width: 50%;">
            <el-divider content-position="left">延期差价累计式规则配置</el-divider>
              <el-table border :data="ruleList3">
                <el-table-column
                  label="寄存天数"
                  width="90">
                  <template scope="scope">
                    <el-input size="mini" v-model="scope.row.days" placeholder="请输入"  clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="利率值/%"
                  width="150">
                  <template scope="scope">
                    <el-input size="mini" v-model="scope.row.rateValue" placeholder="请输入"  clearable></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="handleEdit(scope.$index, scope.row)">提交</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-divider content-position="left">逾期利率规则配置</el-divider>
              <el-form ref="rateForm" :inline="true" :model="rateForm" :rules="rules" size="small" label-width="150px" class="demo-form-inline">      
                <el-form-item
                    label="逾期利率"
                    prop="rate"
                    :rules="[
                      { required: true, message: '不能为空'}
                    ]"
                  >
                  <el-input v-model.number="rateForm.id" v-if="false"></el-input>
                  <el-input v-model="rateForm.rate" autocomplete="off" clearable class="width-input"></el-input>       
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitRateForm('rateForm')">提交</el-button>
                  <span style="color: red">逾期费用 = 寄存金额*逾期利率*逾期天数</span>
                </el-form-item>
              </el-form>
              <el-divider content-position="left">逾期天数规则配置</el-divider>
                <el-form :inline="true" :model="daysForm" ref="daysForm" size="small" label-width="150px" class="demo-form-inline">
                  <el-form-item 
                      label="逾期天数"
                      prop="days"
                      :rules="[
                        { required: true, message: '不能为空'},
                        { type: 'number', message: '必须为数字值'}
                      ]"
                    >
                    <el-input v-model.number="daysForm.id" v-if="false"></el-input>
                    <el-input v-model.number="daysForm.days" autocomplete="off" clearable class="width-input"></el-input>
                    
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitDaysForm('daysForm')">提交</el-button>
                    <span style="color: red">逾期 {{daysForm.days}} 天后；寄存物品变成回收；</span>
                  </el-form-item>
              </el-form>
              <el-divider content-position="left">邀请规则配置[首次下单]</el-divider>
              <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="150px" class="demo-form-inline"> 
                <el-form-item label="寄存开关">
                  <el-radio v-model="form.sy_invite_rule_switch" :label="0">关闭</el-radio>
                  <el-radio v-model="form.sy_invite_rule_switch" :label="1">开启</el-radio>
                </el-form-item>     
                <el-form-item
                    label="寄存佣金"
                    prop="sy_invite_rule_money"
                    :rules="[
                      { required: true, message: '不能为空'},
                      { type: 'number', message: '必须为数字值'}
                    ]"
                  >
                  <el-input v-model.number="form.sy_invite_rule_money" autocomplete="off" clearable class="width-input"></el-input>       
                  </el-form-item> 
                  <el-form-item label="F0开关">
                  <el-radio v-model="form.sy_invite_rule_f0_switch" :label="0">关闭</el-radio>
                  <el-radio v-model="form.sy_invite_rule_f0_switch" :label="1">开启</el-radio>
                </el-form-item>     
                <el-form-item
                    label="F0佣金"
                    prop="sy_invite_rule_f0_money"
                    :rules="[
                      { required: true, message: '不能为空'},
                      { type: 'number', message: '必须为数字值'}
                    ]"
                  >
                  <el-input v-model.number="form.sy_invite_rule_f0_money" autocomplete="off" clearable class="width-input"></el-input>       
                  </el-form-item> 
                  <el-form-item label="回收开关">
                    <el-radio v-model="form.sy_huishou_invite_rule_switch" :label="0">关闭</el-radio>
                    <el-radio v-model="form.sy_huishou_invite_rule_switch" :label="1">开启</el-radio>
                  </el-form-item>     
                  <el-form-item
                      label="回收佣金"
                      prop="sy_huishou_invite_rule_money"
                      :rules="[
                        { required: true, message: '不能为空'},
                        { type: 'number', message: '必须为数字值'}
                      ]"
                    >
                    <el-input v-model.number="form.sy_huishou_invite_rule_money" autocomplete="off" clearable class="width-input"></el-input>       
                  </el-form-item> 
                <el-form-item label="">
                <el-button type="primary" @click="doSubmit('form')">提交</el-button>
              </el-form-item>
              </el-form>

              <el-divider content-position="left">提成比例&签单/获客人提成池【100】</el-divider>
              <el-form ref="yjForm" :inline="true" :model="yjForm" :rules="rules" size="small" label-width="150px" class="demo-form-inline"> 
                <el-form-item label="配置开关">
                  <el-radio v-model="yjForm.sy_commission_switch" :label="0">关闭</el-radio>
                  <el-radio v-model="yjForm.sy_commission_switch" :label="1">开启</el-radio>
                </el-form-item>     
                <el-form-item
                    label="总金额(%)"
                    prop="sy_commission_total_money"
                    :rules="[
                      { required: true, message: '不能为空'}
                    ]"
                  >
                  <el-input v-model="yjForm.sy_commission_total_money" autocomplete="off" clearable class="width-input"></el-input>       
                  </el-form-item> 
                  <el-form-item
                    label="获客人(%)"
                    prop="sy_commission_get_customer"
                    :rules="[
                      { required: true, message: '不能为空'}
                    ]"
                  >
                  <el-input v-model="yjForm.sy_commission_get_customer" autocomplete="off" clearable class="width-input"></el-input>       
                  </el-form-item> 
                  <el-form-item
                    label="签单人(%)"
                    prop="sy_commission_signer_customer"
                    :rules="[
                      { required: true, message: '不能为空'}
                    ]"
                  >
                  <el-input v-model="yjForm.sy_commission_signer_customer" autocomplete="off" clearable class="width-input"></el-input>       
                  </el-form-item>                  
                <el-form-item label="">
                <el-button type="primary" @click="doYjSubmit('yjForm')">提交</el-button>
              </el-form-item>
              </el-form>
        </div>
      </div>
         
  </div>
  
</template>

<script>
import { getSettingList, createOrUpdate } from '@/api/syCostRuleSetting'
import { del, add, get } from '@/api/yxSystemConfig'
import picUpload from '@/components/pic-upload'
import { Message } from 'element-ui'
export default {
  components: { picUpload },
  data() {
    return {
      delLoading: false,
      ruleList0:[],
      ruleList3:[],
      daysForm: {
        id:'',
        days: 3
      },
      rateForm:{
        id:'',
        // min:'',
        // max:'',
        rate:''
      },
      form: {
        sy_invite_rule_switch : 1,  //默认开启
        sy_invite_rule_money: 0,
        sy_huishou_invite_rule_switch : 0,  //默认开启
        sy_huishou_invite_rule_money: 0,
        sy_invite_rule_f0_switch : 0,  //默认开启
        sy_invite_rule_f0_money: 0
      },
      yjForm:{
        sy_commission_switch : 1,  //默认开启
        sy_commission_total_money: 0,
        sy_commission_get_customer: 0,
        sy_commission_signer_customer: 0,
      },
      rules: {
      }
    }
  },
  created() {
    getSettingList().then(res => {
      console.info(JSON.stringify(res));
      this.daysForm.id = res.yqDays.id;
      this.daysForm.days = parseInt(res.yqDays.rateValue);
      this.rateForm.id = res.yqRate.id;
      // this.rateForm.min = parseInt(res.yqRate.daysMin);
      // this.rateForm.max = parseInt(res.yqRate.daysMax);
      this.rateForm.rate = res.yqRate.rateValue;
      this.ruleList0 = res.ruleList0;
      this.ruleList3 = res.ruleList3;
      
    }),
    get().then(rese => {
      const that = this;
      rese.content.map(function(key, value) {
        const keyName = key.menuName
        const newValue = key.value
        if(keyName in that.form){
          that.form[keyName] = newValue
        }
        if(keyName in that.yjForm){
          that.yjForm[keyName] = newValue
        }
      })
      this.form.sy_invite_rule_switch = parseInt(this.form.sy_invite_rule_switch);
      this.form.sy_invite_rule_money = parseInt(this.form.sy_invite_rule_money);
      this.form.sy_huishou_invite_rule_switch = parseInt(this.form.sy_huishou_invite_rule_switch);
      this.form.sy_huishou_invite_rule_money = parseInt(this.form.sy_huishou_invite_rule_money);
      this.form.sy_invite_rule_f0_switch = parseInt(this.form.sy_invite_rule_f0_switch);
      this.form.sy_invite_rule_f0_money = parseInt(this.form.sy_invite_rule_f0_money);
      this.yjForm.sy_commission_switch = parseInt(this.yjForm.sy_commission_switch);
    })
  },
  methods: {
    doSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.form).then(res => {
            Message({ message: '设置成功', type: 'success' })
          }).catch(err => {
            // this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false;
        }
      });
      
    },
    doYjSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.yjForm).then(res => {
            Message({ message: '设置成功', type: 'success' })
          }).catch(err => {
            // this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false;
        }
      });
      
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 5 === 0) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    submitRateForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let remarks ='逾期利率'+this.rateForm.rate+'%';
          let param ={
            id: this.rateForm.id,
            remarks: remarks,
            // daysMin:this.rateForm.min,
            // daysMax:this.rateForm.max,
            ruleType:1,  //规则类型(0技术服务费1逾期利率 2逾期天数 3延期差价）
            rateValue: this.rateForm.rate
          };
          createOrUpdate(param).then(res => {
            Message({ message: '设置成功', type: 'success' })
          }).catch(err => {
            console.log(err.response.data.message)
          })
        } else {
          return false;
        }
      });
    },
    handleEdit(index, row) {
      if(!(row.days && row.rateValue)){
        this.$message({
          message: '所有值不能为空！',
          type: 'warning'
        });
        return false;
      }
      let remarks ='';
      if(row.ruleType == 3 ){
        remarks ='延期利率'+row.rateValue+'%';//25-30天；延期利率20%
      }else{
        remarks =''+row.daysMin+'-'+row.daysMax+' 金额；利率'+row.rateValue+'%';//25-30天；利率20%
      }
      row.remarks = remarks;
      createOrUpdate(row).then(res => {
        Message({ message: '设置成功', type: 'success' })
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    submitDaysForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let remarks ='逾期 '+this.daysForm.days+' 天后；寄存物品变成回收；寄存物品直接由平台处理掉！';
          let param ={
            id: this.daysForm.id,
            remarks: remarks,
            ruleType:2,  //规则类型(0技术服务费1逾期利率 2逾期天数 3延期差价）
            rateValue: this.daysForm.days
          };
          createOrUpdate(param).then(res => {
            Message({ message: '设置成功', type: 'success' })
          }).catch(err => {
            // this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
  .width-input{
    width: 100px;
  }
</style>
